// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import TextArea from "./textArea/index";
import Input from "./input/index";
import { childrenMap, px2rem } from "../util/Utils";
import { createContext, useEffect, useState, useContext } from "react";
import { number, object, string } from "prop-types";
// import { toast } from "../";

let Context = createContext()
let FieldContext = createContext()
Form.Context = Context
Field.Contex = FieldContext
function Form(props) {
    let { children,header} = props
    // // eslint-disable-next-line no-unused-vars
    // let [itemPass,setItemPass] = useState()
    const [formData, setFormData] = useState({})
    // 获取表单值
    Form.getData = function getData(){
        let data = {}
        for (const key in formData) {
            data[key] = formData[key].value
        }
        return data
    }
    Form.toArray = function toArray(){
        let data = []
        for (const key in formData) {
            data.push({name:key,value:formData[key].value})
        }
        return data
    }
    // 整体校验
    Form.check = function check (){
        // console.log(formData)
        let pass = true
        for (let key in formData){
            let {checkRules, setPass, value} = formData[key]
            if(formData[key].checkRules){
                if(checkRules.regExp){
                    if(checkRules.regExp.test(value)){
                        setPass(isPass=>{
                            return true
                        })   
                    }else{
                        setPass(isPass=>{
                            return false
                        })  
                        pass = false
                        return pass
                    }
                }else if(checkRules.checkFun){
                    // 根据函数进行校验
                    setPass(isPass=>{
                        return checkRules.checkFun(value)
                    })
                    pass = checkRules.checkFun(value)
                    if(!pass)
                        return pass
                }
            }else{
                setPass(isPass=>{
                    return true
                })  
            }
        }
        // console.log('pass', pass)
        return pass
    }
    useEffect(()=>{

        return ()=>{}
        
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return (
        <Context.Provider value={{formData,setFormData}}>
            <div className='d-form'>
                {header && <div className="d-form-header">
                    <div className="header-title">{header.title}</div>
                    <div className="header-title-sec">{header.secondTitle}</div>
                </div>}
                {childrenMap(children,{})}
            </div>
        </Context.Provider>)
}


function Field(props) {
    let {children, label, labelWidth, checkRules, index, mark, name} = props
    let [isPass, setPass] = useState(true)
    const {formData, setFormData} = useContext(Context)
    const [itemVal, setItemVal] = useState(null)
    useEffect(() => {
        // 每个Field初始化时都会根据name值创建一个数据
        formData[name] = {
            value:'', // 值
            checkRules, // 验证规则
            setPass // 方便Form.check 进行表单验证
        }
        // 推到formData中
        setFormData(formData)
        return () => {
            
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    useEffect(() => {
        if(checkRules && itemVal){
            if(checkRules.regExp){
                if(checkRules.regExp.test(itemVal)){
                    setPass(isPass=>{
                        return true
                    })  
                    return
                }
                setPass(isPass=>{
                    return false
                })  
            }else if(checkRules.checkFun){
                setPass(checkRules.checkFun(itemVal)) 
            }
        }else{
            setPass(isPass=>{
                return true
            })  
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [itemVal])
    return (
    // 传递一个更新值的方法，name，校验通过状态
    <FieldContext.Provider value={{setItemVal, name, index, isPass}}>
        <div className='d-item'>
            <span style={{width:px2rem(labelWidth)}} className="label">
                {mark && <span className="mark">*</span>}
                {label}
            </span>
            {/* 遍历children并传值 */}
            {childrenMap(children,{
                index,
                // name,
                // isPass
            })}
            {isPass ? null: <span style={{left:px2rem(labelWidth + 20)}} className='warnText animated fadeIn faster'>{checkRules.warnText||'输入不符合要求'}</span> }
        </div>
    </FieldContext.Provider>)
}
Field.propTypes={
    checkRules:object,
    label:string,
    labelWidth:number,
    name:string
}
Field.defaultProps={
    checkRules:null,
    label:'表单label'
}

export {
    TextArea, Form, Input, Field, FieldContext, Context
}